<template>
	<view>
    <uv-toast ref="uToast"></uv-toast>
    <uv-no-network></uv-no-network>
    <Nav title="立即购买"></Nav>
    <Header></Header>
    <view class="layout">
      <view class="content">
        <addr
            @update:id="updateId"
        ></addr>
        <Goods
            @update:list="updateList"
            @update:totalPrice="updateTotalPrice"
        ></Goods>
      </view>
      <view class="btn">
        <view class="left">合计: <text>￥{{totalPrice}}</text></view>
        <view class="right">
          <uv-button
              custom-style="width: 150px"
              @click="payFn"
              text="立即付款" type="primary" />
        </view>
      </view>
    </view>
    <uv-modal ref="modal" content="支付成功！" @confirm="confirmFn"></uv-modal>
	</view>
</template>

<script setup>
import Nav from "@/components/nav.vue";
import Header from "@/components/header.vue";
import {ref} from "vue"
import Goods from "@/components/goods.vue";
import addr from "@/components/addr.vue"
import {createOrder} from "@/request/api"
import Address from "@/components/address.vue";
const modal = ref(null)
const list = ref([])
const totalPrice = ref(0)
const address_id = ref(0)
const payFn = () => {
  // modal.value.open()
  const data = {
    address_id: address_id.value,
    goods_info: JSON.stringify(list.value),
    total: totalPrice.value
  }
  // console.log(data, 'data')
  createOrder(data).then(res => {
    console.log(res, '---')
    if(res.code === 0){
      modal.value.open()
    }
  })
}
const updateList = (newList) => {
  list.value = newList;
}
const updateTotalPrice = (newTotalPrice) => {
  totalPrice.value = newTotalPrice;
}
const updateId = (newId) => {
  address_id.value = newId
}
const confirmFn = () => {
  modal.value.close()
  uni.navigateTo({
    url: '/pages/order/order'
  })
  uni.removeStorage("GOODS")
}
</script>

<style lang="scss" scoped>
.layout{
  height: calc(100vh - 88px);
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  background-color: #F5F5F5;
  //border: 1px solid red;
  &::-webkit-scrollbar {
    display: none;
  }
  .content{
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 20px;
    height: calc(100% - 60px);


  }
  .btn{
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #FFFFFF;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    .left{
      width: calc(100% - 150px);
      color: #666666;
      text-align: center;
      text{
        color: red;
        font-size: 18px;
      }
    }
  }
}
</style>
